<!-- 页面 -->
<template>
  <div>
    <div class="search-bar">
      <el-input v-model="searchQuery.country" placeholder="请输入搜索国家" class="search-input" />
      <el-button type="primary" @click="emitSearch">搜索</el-button>
      <el-button v-permission="'add_info'" type="primary" class="button" @click="openAddDialog">
        添加信息
      </el-button>
    </div>
    <el-table :data="paginatedData" border style="width: 100%" class="center-table" v-loading="loading">
      <el-table-column prop="ip" label="IP">
        <template #default="scope">
          <span class="ellipsis" :title="scope.row.ip">{{ scope.row.ip }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="company" label="所属公司" align="center">
        <template #default="scope">
          <span class="ellipsis" :title="scope.row.company">{{ scope.row.company }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="country" label="所属国家" align="center">
        <template #default="scope">
          <span class="ellipsis" :title="scope.row.country">{{ scope.row.country }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="service" label="服务" align="center">
        <template #default="scope">
          <span class="ellipsis" :title="scope.row.service">{{ scope.row.service }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="domain" label="域名">
        <template #default="scope">
          <span class="ellipsis" :title="scope.row.domain">{{ scope.row.domain }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operSystem" label="操作系统">
        <template #default="scope">
          <span class="ellipsis" :title="scope.row.operSystem">{{ scope.row.operSystem }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="port" label="开放端口">
        <template #default="scope">
          <span class="ellipsis" :title="scope.row.port">{{ scope.row.port }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230">
        <template #default="scope">
          <el-button v-permission="'edit_info'" size="mini" @click="editRow(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" @click="viewDetails(scope.row)"> 详情 </el-button>
          <el-button v-permission="'delete_info'" size="mini" type="danger" @click="deleteRow(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="pageSize" :current-page="currentPage" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></el-pagination>
    <!-- 弹出层组件 -->
    <document ref="documentDialog" :form-data="dialogFormData" :mode="dialogMode" @submit="emitDocumentSubmit">
      <template #form="{ form }">
		<el-form-item label="所属国家">
          <el-input v-model="form.country" placeholder="请输入所属国家" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="form.company" placeholder="请输入所属公司" :disabled="dialogMode === 'view'" />
        </el-form-item>        
        <el-form-item label="CMS版本">
          <el-input v-model="form.cmsVersion" placeholder="请输入CMS版本" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="敏感路径">
          <el-input v-model="form.sensitivePath" placeholder="请输入敏感路径" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="登录入口">
          <el-input v-model="form.loginEntrance" placeholder="请输入登录入口" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="服务">
          <el-input v-model="form.service" placeholder="请输入服务" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="请输入邮箱" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="域名">
          <el-input v-model="form.domain" placeholder="请输入域名" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="IP">
          <el-input v-model="form.ip" placeholder="请输入IP" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="IP地址段">
          <el-input v-model="form.addressSegment" placeholder="请输入IP地址段" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="组件指纹">
          <el-input v-model="form.componentFp" placeholder="请输入组件指纹" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="操作系统">
          <el-input v-model="form.operSystem" placeholder="请输入操作系统" :disabled="dialogMode === 'view'" />
        </el-form-item>
		<el-form-item label="操作系统版本">
          <el-input v-model="form.systemVersion" placeholder="请输入操作系统版本" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="开放端口">
          <el-input v-model="form.port" placeholder="请输入开放端口" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="设备型号及版本">
          <el-input v-model="form.deviceVersion" placeholder="请输入设备型号及版本" :disabled="dialogMode === 'view'" />
        </el-form-item>        
        <el-form-item label="子域名">
          <el-input v-model="form.subDomain" placeholder="请输入子域名" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="页面标题">
          <el-input v-model="form.pageTitle" placeholder="请输入页面标题" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="url">
          <el-input v-model="form.url" placeholder="请输入url" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="上传入口">
          <el-input v-model="form.uploadEntrance" placeholder="请输入上传入口" :disabled="dialogMode === 'view'" />
        </el-form-item>
        <el-form-item label="组件信息及版本">
          <el-input v-model="form.componentInfoVersion" placeholder="请输入组件信息及版本" :disabled="dialogMode === 'view'" />
        </el-form-item>
      </template>
    </document>
    <!-- 详情弹出层 -->
    <el-dialog :visible.sync="detailsVisible" title="详情信息" width="700px" class="custom-dialog">
      <el-form :model="dialogFormData" label-width="120px">
        <el-form-item label="所属公司">
          <el-input v-model="dialogFormData.company" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属国家">
          <el-input v-model="dialogFormData.country" disabled></el-input>
        </el-form-item>
        <el-form-item label="服务">
          <el-input v-model="dialogFormData.service" disabled></el-input>
        </el-form-item>
        <el-form-item label="域名">
          <el-input v-model="dialogFormData.domain" disabled></el-input>
        </el-form-item>
        <el-form-item label="IP">
          <el-input v-model="dialogFormData.ip" disabled></el-input>
        </el-form-item>
        <el-form-item label="操作系统">
          <el-input v-model="dialogFormData.operSystem" disabled></el-input>
        </el-form-item>
        <el-form-item label="开放端口">
          <el-input v-model="dialogFormData.port" disabled></el-input>
        </el-form-item>
        <el-form-item label="设备型号及版本">
          <el-input v-model="dialogFormData.deviceVersion" disabled></el-input>
        </el-form-item>
        <el-form-item label="操作系统版本">
          <el-input v-model="dialogFormData.systemVersion" disabled></el-input>
        </el-form-item>
        <el-form-item label="地址段">
          <el-input v-model="dialogFormData.addressSegment" disabled></el-input>
        </el-form-item>
        <el-form-item label="CMS版本">
          <el-input v-model="dialogFormData.cmsVersion" disabled></el-input>
        </el-form-item>
        <el-form-item label="上传入口">
          <el-input v-model="dialogFormData.uploadEntrance" disabled></el-input>
        </el-form-item>
        <el-form-item label="信息版本">
          <el-input v-model="dialogFormData.componentInfoVersion" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="dialogFormData.email" disabled></el-input>
        </el-form-item>
        <el-form-item label="网址">
          <el-input v-model="dialogFormData.domain" disabled></el-input>
        </el-form-item>
        <el-form-item label="子域名">
          <el-input v-model="dialogFormData.subDomain" disabled></el-input>
        </el-form-item>

        <!-- 新增字段结束 -->
      </el-form>
<!-- 
      <div style="margin-top: 20px;">
        <el-button type="primary" class="button" @click="openRecommendDialog()">
          使用推荐
        </el-button>
      </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 推荐弹出层 -->
    <el-dialog :visible.sync="recommendVisible" title="推荐信息" width="800px">
      <recommend ref="recommendComponent" :tool-id="dialogFormData.id" @close="recommendVisible = false" />
    </el-dialog>
  </div>
</template>
<!--vue -->
<script>
import document from "@/components/document.vue";
import recommend from "@/components/recommend.vue"; // 引入推荐页面组件
import { mapGetters } from "vuex";
import EventBus from "@/eventBus";

export default {
  components: {
    document,
    recommend,
  },
  name: "home",
  props: {
    targetList: {
      type: Array,
      required: true,
    },
    searchQuery: {
      type: Object,
      required: true,
    },
  },
  //存放数据
  data() {
    return {
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
      dialogFormData: {}, // 弹出层绑定的数据
      dialogMode: "add", // 默认是添加模式
      detailsVisible: false, // 控制详情弹出层显示
      loading: false, // 列表加载状态
      recommendVisible: false, // 控制推荐弹出层显示
    };
  },
  //生命周期函数
  mounted() {
    this.total = this.targetList.length; // 初始化总条数
  },
  //调用方法
  methods: {
    openRecommendDialog() {
      this.recommendVisible = true; // 打开推荐弹出层
    },
    emitSearch() {
      this.handleSearch(); // 确保 emitSearch 方法正确触发 handleSearch
    },
    async handleSearch() {
      console.log("搜索内容:", this.searchQuery);
      this.loading = true; // 开启加载状态
      try {
        if (!this.searchQuery.country.trim()) {
          // 如果搜索框为空，渲染完整列表
          this.$emit("search", {}); // 传递空对象以获取完整列表
          this.searchQuery.country = ""; // 清空输入框
        } else {
          await this.$emit("search", this.searchQuery); // 模拟搜索操作
        }
      } finally {
        this.loading = false; // 关闭加载状态
      }
    },
    emitDocumentSubmit({ form, mode }) {
      if (mode === "add") {
        this.$emit("submit", form); // 调用添加方法
      } else if (mode === "edit") {
        this.$emit("update", form); // 调用更新方法
      }
    },
    openAddDialog() {
      this.dialogMode = "add"; // 设置为添加模式
      this.dialogFormData = {}; // 清空表单数据
      this.$refs.documentDialog.open(); // 打开弹出层
    },
    editRow(row) {
      this.dialogMode = "edit"; // 设置为编辑模式
      this.dialogFormData = { ...row }; // 设置表单数据为当前行数据
      console.log("编辑行数据:", row);

      this.$refs.documentDialog.open(); // 打开弹出层
    },
    viewDetails(row) {
      if (!row) {
        console.error("viewDetails 方法未接收到参数");
        return;
      }

      console.log("接收到的参数:", row);

      this.dialogFormData = { ...row }; // 设置表单数据为当前行数据
      this.detailsVisible = true; // 打开详情弹出层

      // 通过事件总线传递工具 ID
    },
    deleteRow(id) {
      this.$emit("delete", id); // 将删除 ID 传递给父组件
      console.log("删除行 ID:", id);
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 重置为第一页
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
  },
  //监听器
  watch: {
    targetList(newList) {
      this.total = newList.length; // 更新总条数
    },
    "searchQuery.country"(newVal) {
      if (!newVal.trim()) {
        // 当输入框清空时，自动触发搜索以渲染完整列表
        this.handleSearch();
      }
    },
  },
  //计算属性
  computed: {
    ...mapGetters("permissions", ["hasPermission"]),
    filteredTableData() {
      // 根据搜索框内容过滤表格数据
      return this.tableData.filter((item) =>
        Object.values(item).some((value) => value.toString().includes(this.searchQuery))
      );
    },
    paginatedData() {
      // 根据当前页和每页条数计算显示的数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.targetList.slice(start, end);
    },
  },
  //过滤器
  filters: {},
  //自定义指令
  directives: {},
};
</script>
<!-- css样式 -->
<style scoped>
.button {
  margin-left: 10px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.search-input {
  margin-right: 10px;
  width: 300px;
}

/* 表格文字居中 */
.center-table {
  border-radius: 10px;
  
}
.center-table .el-table__cell {
  text-align: center;
  background-color: #262626;
  
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.ellipsis {
  display: inline-block;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  cursor: pointer;
}

/* 搜索框背景色和提示文字颜色 */
::v-deep .search-input .el-input__inner {
  background-color: #262626 !important;
  color: #fff !important;
  /* placeholder 颜色 */
}

::v-deep .search-input .el-input__inner::placeholder {
  color: #fff !important;
  opacity: 1;
}

::v-deep .search-input .el-input__inner::-webkit-input-placeholder {
  color: #fff !important;
}

::v-deep .search-input .el-input__inner:-ms-input-placeholder {
  color: #fff !important;
}

::v-deep .search-input .el-input__inner::-ms-input-placeholder {
  color: #fff !important;
}

::v-deep .custom-dialog {
  color: #fff !important;
  /* 设置弹窗字体颜色为白色 */
}

::v-deep .custom-dialog .el-dialog__header {
  color: #fff !important;
  /* 设置弹窗字体颜色为白色 */
}

.custom-dialog .el-dialog__body .el-dialog__footer {
  background-color: #262626 !important;
  /* 设置弹窗背景为黑色 */
  color: #fff !important;
  /* 设置弹窗字体颜色为白色 */
}

/* 强制 el-dialog 内容背景为黑色 */
::v-deep .el-dialog__wrapper .el-dialog {
  background: #262626 !important;
  color: #fff !important;
}

::v-deep .el-dialog__body,
::v-deep .el-dialog__header {
  background: #262626 !important;
  color: #fff !important;
}

/* 详情信息表格背景色和字体色 */
::v-deep .custom-dialog .el-table,
::v-deep .custom-dialog .el-table__body,
::v-deep .custom-dialog .el-table__header,
::v-deep .custom-dialog .el-table th,
::v-deep .custom-dialog .el-table td,
::v-deep .custom-dialog .el-table__row,
::v-deep .custom-dialog .el-table__cell {
  background-color: #262626 !important;
  color: #fff !important;
  border-color: #444 !important;
}

/* 详情信息表格表头四个字为白色 */
::v-deep .custom-dialog .el-table th {
  color: #fff !important;
}

/* 详情信息弹窗标题四个字为白色 */
::v-deep .custom-dialog .el-dialog__header .el-dialog__title {
  color: #fff !important;
}

::v-deep .el-dialog__header {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-dialog__header .el-dialog__title {
  color: #fff !important;
  /* 白色字体 */
}

::v-deep .el-dialog__body {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-dialog__footer {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-message-box .el-message-box__header {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-dialog__body .el-form .el-form-item .el-form-item__label {
  color: #fff !important;
}

::v-deep .el-input .el-input__inner {
  background-color: #2e2e2e !important;
  /* 黑色背景 */
}

::v-deep .el-input__inner {
  color: #fff !important;
}
</style>
